
<template>
    <view>
        <view class="fixed">
            <scroll-view scroll-x class="bg-white nav " :scroll-with-animation="true" :enable-back-to-top="true">
                <view class="flex text-center tab-container">
                    <view class="cu-item flex-sub" :class="0 == selectIndex ? 'tab-select' : ''" @tap="onTabSelect"
                        data-type="2" data-index="0">
                        今天
                    </view>
                    <view class="cu-item flex-sub" :class="1 == selectIndex ? 'tab-select' : ''" @tap="onTabSelect"
                        data-type="3" data-index="1">
                        昨天
                    </view>
                    <view class="cu-item flex-sub" :class="2 == selectIndex ? 'tab-select' : ''" @tap="onTabSelect"
                        data-type="1" data-index="2">
                        所有
                    </view>
                    <view class="cu-item flex-sub" :class="3 == selectIndex ? 'tab-select' : ''" @tap="onTabSelect"
                        data-type="4" data-index="3">
                        转出
                    </view>
                </view>
            </scroll-view>
            <view class="tab-cursor" :style="[translateX]"></view>
        </view>

        <view class="order-list-container">
            <scroll-view class="order-list" :scroll-with-animation="true" :enable-back-to-top="true">
                <view class="cu-list ">
                    <view class="cu-form-group" v-for="(item, index) in dataList" :key="index"
                        :class="item.id < 1 ? 'service-cu-item' : ''">
                        <!-- <view class="title">
                            <view class="text-grey">
                                <text class="text-grey text-sm">
                                    <text>ID:{{" "+item.id+" "}}</text><text>{{" "+item.eventType+" "}}</text>
                                </text>
                                <text class="text-grey text-sm ">
                                   {{" "+item.amount}}
                                </text>
                            </view>
                        </view> -->
                        <view class="content" :data-id="item.id">
                            <view class="text-grey">
                                <text class="text-grey lg">
                                    <text>ID:{{ " " + item.id + " " }}</text>
                                    <text class="text-black">{{ " " + item.eventType + " " }}</text>
                                </text>
                                <text class="text-red text-lg text-amount text-bold">
                                    {{ " " + item.amount }}
                                </text>
                            </view>
                            <view class="text-grey">
                                <text class="text-grey text-sm">
                                    {{ item.eventDesc }}
                                </text>
                            </view>
                            <view class="text-grey">
                                <text class="text-grey text-sm">
                                    {{ item.createTime }}
                                </text>
                            </view>
                        </view>
                        <!-- <view class="content" :data-id="item.id" >
                            <view class="text-black text-lg">{{item.title}}</view>
                            <view class="text-grey">
                                <text class="text-grey text-sm">
                                    {{item.peoples}}
                                </text>
                                <text class="text-grey text-sm separator">{{'|'}}</text>
                                <text class="text-grey text-sm ">
                                    {{item.uploadTime}}
                                </text>
                            </view>
                        </view> -->
                    </view>

                </view>
            </scroll-view>
        </view>

    </view>
</template>
<script lang="ts" src="./score-list.ts"/>
<style >
@keyframes kf-marque-animation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

.tab-cursor {
    width: 25%;
}

.text-amount {
    right: 25rpx;
    position: absolute;
}

.cu-form-group {
    min-height: 150rpx;

}

.cu-form-group .content view:nth-child(2) {
    margin: 10rpx auto;
}

.cu-form-group-announcement .notice {
    width: 45rpx;
    font-size: 30rpx;
}

.screen-swiper {
    margin-top: 100rpx;
}

.order-list .cu-item {
    padding-left: 5%;
    padding-right: 5%;
}

.order-list-container {
    overflow: hidden;
    background-color: #fff;
}

.order-menu-nav {
    width: 100%;
}

.order-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.empty-list {
    height: 500rpx;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    line-height: 100rpx;
}

.order-list {
    background-color: #fff;
    position: relative;
}

.cu-list .action {
    margin-right: 20rpx;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.separator {
    margin: auto 15rpx;
}

.cu-list.menu-avatar>.cu-item .content {
    width: auto;
    left: 186rpx;
    line-height: 1.7em;
}

.cu-list.menu-avatar>.cu-item {
    padding: 5rpx auto;
}

.cu-bar {
    text-align: center;
}

.cu-bar .content {
    left: auto;
    /* color: red; */
    text-align: center;
    width: 100%;
}

.cu-list.menu-avatar>.service-cu-item {
    background-color: #f5f915;
}

.tab-select {
    color: #0081ff;
}
</style>
